<template>
  <div class="refundDetail">
    <div class="refund-top">
      <div class="refund-top-txt">

        <div class="title" v-if="resData.status == 1">请等待商家处理</div>
        <div class="title" v-else-if="resData.status == 2">商家已同意退款<span class="tips"
            v-if="resData.refund_express_limit>0">（请在{{resData.refund_express_limit}}天内填写物流单号）</span></div>
        <div class="title" v-else-if="resData.status == 3">商家拒绝退款</div>
        <div class="title" v-else-if="resData.status == 4">请等待商家确认收货</div>
        <div class="title" v-else-if="resData.status == 5">退款成功</div>

        <div class="txt" v-if="resData.status == 5">{{ resData.end_time }}</div>
        <div class="txt" v-else>订单编号：{{ resData.order_no }}</div>

      </div>
      <div class="img">
        <img v-if="resData.status == 1 || resData.status == 2 || resData.status == 3"
          src="https://img.wifenxiao.com/h5-wfx/images/order/refund_status.png" alt="">
        <img v-if="resData.status == 4" src="https://img.wifenxiao.com/h5-wfx/images/order/refund_status2.png" alt="">
        <img v-if="resData.status == 5" src="https://img.wifenxiao.com/h5-wfx/images/order/refund_status3.png" alt="">
      </div>
    </div>

    <!--等待商家处理-->
    <div class="refund-middle" v-if="resData.status == 1">
      <div class="refund-middle-tit">
        <span>您已成功发起退款申请，请耐心等待商家处理</span>
      </div>
      <div class="refund-middle-wrap">
        <ul>
          <li>商家同意后，即可查看到退货地址，进行退货操作</li>
          <li>如果商家拒绝，您可以修改退款申请后再次发起，商家会重新处理</li>
        </ul>
        <div class="button">
          <van-button round hairline class="btn" @click="handleClickModifyApply">修改申请</van-button>
        </div>
      </div>
    </div>
    <!--等待商家处理-->

    <!--商家同意退款-->
    <div class="refund-middle" v-if="resData.status == 2">
      <div class="refund-middle-tit">
        <span>退货地址</span>
      </div>
      <div class="refund-middle-wrap">
        <ul>
          <li>收件人：{{ addressInfo.name }}</li>
          <li>联系电话：{{ addressInfo.mobile || `${addressInfo.area_code}-${addressInfo.tel}` }}</li>
          <li class="address">
            <span class="label">联系地址：</span><span class="txt">{{ addressInfo.receiver_address }}</span>
          </li>
        </ul>
        <div class="button">
          <van-button @click="handleCopyEvent(addressInfo.receiver_address, $event)" round hairline
            class="btn">复制地址</van-button>
        </div>
      </div>
    </div>
    <!--商家同意退款-->

    <!--商家拒绝退款-->
    <div class="refund-middle" v-if="resData.status == 3">
      <div class="refund-middle-tit">
        <span>商家拒绝理由</span>
      </div>
      <div class="refund-middle-wrap">
        <ul>
          <li>{{ resData.refuse_reason }}</li>
        </ul>
        <div class="button">
          <van-button round hairline class="btn" @click="handleClickModifyApply">修改申请</van-button>
        </div>
      </div>
    </div>
    <!--商家拒绝退款-->

    <!--请等待商家确认收货-->
    <div class="refund-middle" v-if="resData.status == 4">
      <div class="refund-middle-express">
        <div class="express-item">
          <span class="label">物流公司</span>
          <span class="txt">{{ resData.express_name }}</span>
          <span class="modify fr" @click="handleClickModifyExpress">修改</span>
        </div>
        <div class="express-item">
          <span class="label">快递单号</span>
          <span class="txt">{{ resData.express_no }}</span>
        </div>
      </div>
    </div>
    <!--请等待商家确认收货-->

    <!--请等待商家确认收货-->
    <div class="refund-middle" v-if="resData.status == 5">
      <div class="refund-middle-express">
        <div class="express-item">
          <span class="label">商家已同意退款</span>
        </div>
        <div class="express-item">
          <span class="label">退款总金额</span>
          <span class="txt fr" v-html="scaleGoodsPriceFn(resData.total_fee)"></span>
        </div>
      </div>
    </div>
    <!--请等待商家确认收货-->


    <div class="refund-bottom">
      <div class="refund-bottom-tit">
        <div class="txt">退货信息</div>
      </div>
      <div v-for="(goods, index) in resData.goods" :key="index" class="refund-bottom-goods">
        <div class="img">
          <img :src="goods.img" alt="">
        </div>
        <div class="goods-info">
          <div class="title">{{ goods.item_title }}</div>
          <div class="props">{{ goods.sku_name }}</div>
          <span class="fr">x{{goods.num}}</span>
        </div>
      </div>

      <div class="refund-bottom-reason">
        <ul>
          <li>退货原因：{{ resData.reason }}</li>
          <li>退货金额：￥{{ resData.apply_fee }}</li>
          <li>申请时间：{{ resData.create_time }}</li>
          <li>退货编号：{{ resData.complain_order_no }}</li>
        </ul>
      </div>
    </div>

    <div class="refund-btn">

      <van-button round class="btn red-gra-btn" v-if="resData.status == 1"
        @click="clickCancleTk(resData.status)">取消申请</van-button>
      <!--resData.status == 2-->
      <van-button round class="btn red-gra-btn" v-if="resData.status == 2"
        @click="handleClickModifyExpress('noExpress')">我已寄出/未收到货</van-button>

      <van-button style="margin-top: 15px;" round class="btn red-border-btn" v-if=" resData.status == 2"
        @click="clickCancleTk(resData.status)">取消申请</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'vant'
import { scaleGoodsPrice } from '@/utils/index'
import { getComplainOrderDetail, newRefundCancleComplain, cancleComplain, getComplainOrderAddress } from '@/api/order/order'
export default Vue.extend({
  name: 'index',
  data() {
    return {
      addressInfo: {},
      resData: {}
    }
  },
  methods: {
    handleClickModifyApply() {
      this.$JumpPath(this, 'refunding', { id: this.resData.order_id, type: 2, modify: 1, complain_order_id: this.$route.query.complain_order_id })
    },
    // 复制
    handleCopyEvent(text, e) {
      // TODO 小程序复制
        wx.setClipboardData({
          data: text,
          success (res) {
            wx.showToast({
              title: '复制成功'
            })
          }
        })
    },
    // 获取地址信息
    getComplainOrderAddressFn() {
      const param = {}
      param.id = this.$route.query.complain_order_id
      getComplainOrderAddress(param).then(res => {
        if (res.status == 1) {
          this.addressInfo = res.data
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 获取详情
    getComplainOrderDetailFn() {
      const param = {}
      param.id = this.$route.query.complain_order_id
      getComplainOrderDetail(param).then(res => {
        if (res.status == 1) {
          this.resData = res.data
          if (this.resData.status == 2) {
            this.getComplainOrderAddressFn()
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 修改物流
    handleClickModifyExpress(str) {
      const data = {}
      data.complain_order_id = this.$route.query.complain_order_id
      if (str != 'noExpress') {
        data.express = this.resData.express
        data.express_no = this.resData.express_no
        data.express_name = this.resData.express_name
      }
      this.$JumpPath(this, 'modifyExpress', data)
    },
    // 取消换货、取消退货
    clickCancleTk(status) {
      const that = this
      Dialog.confirm({
        message: '是否取消申请？',
        className: 'common-confirm',
        closeOnClickOverlay: true
      }).then(() => {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        const data = { id: this.$route.query.complain_order_id }
        if (status == 1) {
          this.cancleComplainFun(data)
        }
        if (status == 2) {
          this.newRefundCancleComplainFun(data)
        }
        // on confirm
      }).catch(() => {
        // on cancel
      })
    },
    newRefundCancleComplainFun(data) {
      newRefundCancleComplain(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('操作成功')
          setTimeout(() => {
            this.$JumpPath(this, 'order-lists', { type: 4 })
          }, 1000)
        } else {
          this.$Error(res.msg)
        }
        this.init()
      })
    },

    cancleComplainFun(data) {
      cancleComplain(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('操作成功')
          setTimeout(() => {
            this.$JumpPath(this, 'order-lists', { type: 4 })
          }, 1000)
        } else {
          this.$Error(res.msg)
        }
        this.init()
      })
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    }
  },
  mounted() {
    this.getComplainOrderDetailFn()
      // TODO 订阅编辑物流发出的广播
      window.$$subscribe('refreshRefundDetail', data => {
        this.getComplainOrderDetailFn()
      })
  },
  beforeDestroy() {
    window.$$unsubscribe('refreshRefundDetail')
  }
})
</script>

<style lang="scss">
  .refundDetail{
    .refund-top{
      position:relative;
      width: 100%;
      height: 200px;
      background: linear-gradient(91deg, #F30C23 0%, #FE224E 100%);
      opacity: 1;
      &-txt{
        position:relative;
        z-index:2;
        display: inline-block;
        padding: 40px 30px;
        color: #fff;
        .title{
          font-size: 36px;
          margin-bottom: 20px;
          line-height: 50px;
          .tips{
            font-size:24px;
          }
        }
        .txt{
          font-size: 26px;
          line-height: 28px;
        }
      }
      .img{
        position:absolute;
        right:30px;
        top:18px;
        width: 140px;
        img{
          width: 100%;
        }
      }
    }
    .refund-middle{
      position:relative;
      border-radius: 20px;
      background: #fff;
      margin-top: -20px;
      &-tit{
        padding: 24px 30px;
        color: #333;
        font-size: 26px;
        border-bottom: 1px solid #EDEDED;
      }
      &-wrap{
        padding: 16px 25px;
        ul{
          padding-left: 20px;
          li{
            color: #999;
            font-size: 24px;
            line-height: 34px;
            margin-bottom: 8px;
            position: relative;
            &:after{
              display: inline-block;
              content: '';
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: #B0B0B0;
              position: absolute;
              top: 12px;
              left: -14px;
            }
            .address{
              .txt{
                width: calc(100% - 67px);
                display: inline-block;
                vertical-align: top;
              }
            }
          }
        }
        .button{
          text-align: right;
          padding: 15px 0;
          .btn{
            height: 48px;
            line-height: 48px;
            color: #F30C23;
            border-color: #F30C23;
            font-size: 24px;
            padding: 0 20px;
          }
        }
      }
      &-express{
        padding: 24px 30px;
        .express-item{
          margin-bottom: 24px;
          font-size: 26px;
          line-height: 36px;
          color: #333;
          span.label{
            margin-right: 36px;
          }
          .modify{
            color: #999;
            position: relative;
            padding-right: 20px;
            &::after{
              content: '';
              width: 11px;
              height: 18px;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              background: url('https://img.wifenxiao.com/h5-wfx/images/user/member/right.png') center/cover no-repeat;
            }
          }
          &:last-child{
            margin-bottom: 6px;
          }
        }
      }
    }
    .refund-bottom{
      background: #fff;
      border-radius: 20px;
      margin-top: 20px;
      &-tit{
        padding: 20px 30px;
        color: #333;
        font-size: 32px;
        line-height: 56px;
      }
      &-goods{
        padding: 20px 30px;
        background: #F7F7F7;
        display: flex;
        .img{
          flex: 0 120px;
          height: 120px;
          img{
            height: 100%;
            width: 100%;
          }
        }
        .goods-info{
          flex: 1;
          padding-left: 16px;
          padding-top: 4px;
          .title{
            font-size: 24px;
            line-height: 32px;
            color: #333;
            margin-bottom: 16px;
          }
          .props{
            color: #999999;
          }
        }
      }
      &-reason{
        padding: 24px 30px;
        li{
          color: #999;
          font-size: 24px;
          line-height: 44px;
        }
      }
    }
    .refund-btn{
      margin-top: 40px;
      padding: 0 30px;
      .btn{
        color: #fff;
        width: 100%;
        font-size: 28px;
        height: 88px;
        line-height: 88px;
        &.red-border-btn {
          border-color: #F30C23 !important;
          color: #F30C23;
        }
      }
    }
  }
</style>
